<template>
  <div class="uploadFolder">
    <!-- <el-button :disabled="uploadLoading" type="primary" @click="choiceImg(1)">选择文件</el-button>
    <input ref="fileInput" type="file" style="display: none" :accept="accept" :multiple="multiple"
      @change="fileUpload_onselect"> -->
    <box-loading v-if="boxLoadState"></box-loading>
    <el-upload class="upload-demo uploadBox" drag :http-request="uploadFile" :show-file-list="hideList" accept=".csv"
      multiple :on-change="handleFileChanged" :before-upload="checkFileType"
      v-if="props.operatorData.filename == undefined" :disabled="!store.LeftTabsState">
      <div class="el-upload__text uploadBoxBtn">
        <el-image :src="imgUrl" fit />
        <el-button type="primary">上传文件</el-button>
        <div>点击上传文件按钮，或拖拽文件到这里</div>
        <div>支持上传的文件格式：{{ fileType }}</div>
      </div>
    </el-upload>
    <div class="nameBox row" v-if="props.operatorData.filename != undefined">
      <div class="title">
        {{ props.operatorData.filename }}
      </div>
      <el-tooltip v-if="viewExperiment" class="box-item" effect="dark" content="重新选择文件" placement="top-start">
        <el-icon class="closeBtn" @click="deleteFile">
          <CloseBold />
        </el-icon>
      </el-tooltip>
    </div>
    <el-progress v-if="showProcess" type="line" :stroke-width="2" :percentage="progress" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, shallowRef, onMounted } from "vue"
import { designerStore } from 'src/stores/designerTool/designerTool'
import { ElMessage } from 'element-plus'
import { operatorFiles } from 'src/api/designerTool'
import imgUrl from 'assets/dataSet/upload.png'
import boxLoading from 'src/components/boxLoading.vue'
const boxLoadState = ref(false)
const hideList = ref(false)
const store = designerStore()
const props = defineProps({
  uploadType: {
    type: String,
    default: 'operator'
  },
  // 多选
  multiple: {
    type: Boolean,
    default: false
  },
  operatorData: {
    type: Object
  }
})
const uploadLoading = ref(false)
const showProcess = ref(false)
const progress = ref(0)

const fileType = ref('csv')
const uploadFileList: any = ref([])
const paramObj = shallowRef()

const enterpriseEncrypt = computed(() => {
  return false
})
const viewExperiment = computed(() => {
  return store.LeftTabsState
})
const emits = defineEmits(['successFileUrl', 'deleteFile'])

function uploadFile(obj: any) {
  boxLoadState.value = true
  paramObj.value = new FormData()
  paramObj.value.append("file", obj.file)
  paramObj.value.append("date", obj.file.name)
  operatorFiles(store.project_id, paramObj.value).then((res) => {
    uploadFileList.value.push(res.data)
    // ElMessage.success('文件上传成功')
    // eslint-disable-next-line vue/no-mutating-props
    props.operatorData.default_value = res.data.file
    // eslint-disable-next-line vue/no-mutating-props
    props.operatorData.filename = obj.file.name
    emits('successFileUrl', props.operatorData)
    boxLoadState.value = false
  })
}
function checkFileType(file: any, fileList: any) {
  const fileName = file.name;
  const fileTypeName = fileName.substring(fileName.lastIndexOf(".") + 1);
  const isFileType = fileType.value.includes(fileTypeName)
  if (isFileType == false) {
    ElMessage.error(`上传类型错误，请选择${fileType.value}格式文件`);
    fileList.pop()
  }
  let isLt2k = (file.size / 1024) / 1024 / 1024 < 2 ? '1' : '0';
  if (isLt2k == '0') {
    ElMessage.error(`上传文件过大，请选择小于2G的文件`);
    fileList.pop()
  }
}
const handleFileChanged = (file: any, fileList: any) => {
  // 检查是否有重复文件
  if (fileList.findIndex((f: any) => f.name === file.name) != fileList.findLastIndex((f: any) => f.name === file.name)) {
    ElMessage.error(file.name + "该文件已存在")
    fileList.pop()
    uploadFileList.value.pop()
  }
}
function deleteFile() {
  if (store.LeftTabsState) {
    paramObj.value = null
    uploadFileList.value = []
    // eslint-disable-next-line vue/no-mutating-props
    props.operatorData.default_value = null
    // eslint-disable-next-line vue/no-mutating-props
    delete props.operatorData.filename
    emits('deleteFile', props.operatorData)
  } else {
    ElMessage.warning('实验工作流，禁止数据变更')
  }


}
</script>

<style lang="scss" scoped>
.uploadFolder {
  position: relative;
  width: 100%;

  .el-button {
    width: 100%;
  }
}

.uploadBox {
  .uploadBoxBtn {
    text-align: center;

    .el-image {
      width: 56px;
      height: 56px;
      display: block;
      margin: 0 auto;
    }

    div {
      font-size: 12px;
      height: 20px;
    }

  }
}

.nameBox {
  border: 1px solid #ccc;
  padding: 0 5px;

  .title {
    width: calc(100% - 20px);
  }

  .closeBtn {
    width: 20px;
    margin-top: 10px;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>
